<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="addInfoBubble,addMarkerToContainer" />
  <title>HERE Maps API Example: Adding an Infobubble</title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="libs/jQl.min.js"></script>
  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript"
    data-map-container="mapContainer"
    data-params="maps"
    data-callback="addInfoBubble" >
  </script>
  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Adding an Infobubble with HTML content to the map</h1>
  <div id="mapContainer" style="width:540px; height:334px;"></div>
<script id="example-code" data-categories="infobubble,events" type="text/javascript" >
//<![CDATA[
function addMarkerToContainer(container, coordinate, html) {
  var marker = new nokia.maps.map.StandardMarker(
    coordinate,
    {html: html}
  );
  container.objects.add(marker);
}

function addInfoBubble(map) {
  map.set('center', new nokia.maps.geo.Coordinate(53.430, -2.961));
  map.setZoomLevel(7);

  var infoBubbles = new nokia.maps.map.component.InfoBubbles(),
    TOUCH = nokia.maps.dom.Page.browser.touch,
    CLICK = TOUCH ? 'tap' : 'click',
    container = new nokia.maps.map.Container();

  container.addListener(CLICK, function (evt) {
    infoBubbles.openBubble(evt.target.html, evt.target.coordinate);
  }, false);
  map.components.add(infoBubbles);
  map.objects.add(container);

  addMarkerToContainer(container, [53.439, -2.221],
    '<div><a href=\'http://www.mcfc.co.uk\' >Manchester City</a>' +
    '</div><div >City of Manchester Stadium<br>Capacity: 48,000</div>');

  addMarkerToContainer(container, [53.430, -2.961],
    '<div ><a href=\'http://www.liverpoolfc.tv\' >Liverpool</a>' +
    '</div><div >Anfield<br>Capacity: 45,362</div>');
}
//]]>
</script>
<script type="text/javascript" src="libs/prettyprint.js"></script>
</body>
</html>